import React, { Component } from 'react';
import style from './template.module.css';
import { Table,Dropdown,Switch,Menu,Input,Select, Button, Icon, DatePicker } from 'antd';
import { NavLink } from 'react-router-dom';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { Option } = Select;

class Template extends Component {
  constructor(props) {
    super(props);
  }

  state={
    selectedRowKeys: [],
    datalength:102,
    datalimit:10,
    columns:[],
    data:[],
    pagination:{
      showQuickJumper:true,
      showSizeChanger:true
    }
  }

  onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  nameBlur=()=>{
    console.log('改标题')
  }

  changeDisplay=(e)=>{  
    console.log('改显示隐藏',e)
  }

  histBlur=()=>{
    console.log('改点击量')
  }

  orderstBlur=()=>{
    console.log('改排序')
  }

  open_msg=(data)=>{
    console.log(data)
  }

  componentDidMount() {
    //预览的下拉组件
    const menu_proview = (  
      <Menu className={style.menu_proview}>
        <Menu.Item>
          <a href="" target='_blank'>pc预览</a>
        </Menu.Item>
        <Menu.Item>
          <a href="" target='_blank'>手网预览</a>
        </Menu.Item>
      </Menu>
    )
    const data = [];
    for (let i = 0; i < this.state.datalength; i++) {   //添加模拟数据
      data.push({
        id:i,
        img:require('../../mainlist/images/201909041358059522758.jpg'),
        key: i,
        name: `Edward King ${i}`,
        phone:`1397913122${i}`,
        msg:'我正在注册一家公司，业务通过爱采购销售油茶树苗',
        from:'电脑端',
        ifreplay:'已回复',
        type:'类型',
        webtype:'网站类型',
        sort:'行业分类',
        colorval:'#'+Math.round(Math.random()*1000000),
        colorname:'颜色名',
        ifdisplay:[
          {mod:'显示',id:i,default:true},
          {mod:'隐藏',id:i}
        ],
        orders:i,
        time: {
          text:this.changetime(1398250549123+i*1000),
          timestamp:1398250549123+i*1000
        },
        action:[
          {
            name:'查看',
          },
          {
            name:'删除',
            id:2,
            pid:1,
          }
        ],
      });
    }
    let columns = []
    switch(this.props.mod.type){
      case 'msg':
        columns = [
          {
            title:'编号',
            dataIndex:'id'
          },
          {
            title: '标题名',
            dataIndex: 'name',
            // render:(e)=>(<Input onBlur={this.nameBlur.bind(this)} className={style.name} title={e} placeholder={e} />),
          },
          {
            title:'联系方式',
            dataIndex:'phone',
          },
          {
            title:'留言内容',
            dataIndex:'msg',
            render:(msg)=>(<div title={msg} className={style.liuyan_msg}>{msg}</div>)
          },
          {
            title:'来源',
            dataIndex:'from',
          },
          {
            title:'是否回复',
            dataIndex:'ifreplay',
          },
          {
            title: '更新时间',
            dataIndex: 'time',
            render:(time)=>(time.text),
            sorter:(a,b)=>(a.time.timestamp - b.time.timestamp)
          },
          {
            title: '操作',
            dataIndex: 'action',
            render:(obj,data)=>(<ul className={style.action_ul}>
              {
                obj.map((e,index)=>{return (<li className={e.preview?style.preview:''} key={index}>
                  {e.preview?<Dropdown trigger={['click']} overlay={menu_proview}><a>{e.name}<Icon type="down" /></a></Dropdown>:e.name=='修改'?<NavLink to={e.url}>{e.name}</NavLink>:(e.name=='查看'?<a href={e.url} onClick={this.open_msg.bind(this,data)} id={e.id} pid={e.pid} className={style.action}>{e.name}</a>:<a href={e.url} id={e.id} pid={e.pid} className={style.action}>{e.name}</a>)}
                  </li>)})
              }
            </ul>)
          },
        ]
      break;
      case 'management':
        columns = [
          {
            title:'编号',
            dataIndex:'id'
          },
          {
            title:'模板图',
            dataIndex:'img',
            render:(e)=>(<img className={style.columns_img} imgurl={e} src={e} alt=""/>)
          },
          {
            title: '标题名',
            dataIndex: 'name',
            // render:(e)=>(<Input onBlur={this.nameBlur.bind(this)} className={style.name} title={e} placeholder={e} />),
          },
          {
            title:'类型',
            dataIndex:'type',
          },
          {
            title: '行业分类',
            dataIndex: 'sort',
          },
          {
            title: '是否显示',
            dataIndex: 'ifdisplay',
            // render:obj=>(<p onClick={this.changeDisplay.bind(this,obj)} className={style.ifdisplay}>{obj.map(e=>(e.default?e.mod:''))}</p>)
            render:(obj,data)=>(<Switch onChange={this.changeDisplay.bind(this,data.id)} checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked />) 
          },
          {
            title: '排序',
            dataIndex: 'orders',
            // render:(e)=>(<Input onBlur={this.orderstBlur.bind(this)} className={style.orders} placeholder={e} />),
            sorter:(a,b)=>(a.orders - b.orders)
          },
          {
            title: '更新时间',
            dataIndex: 'time',
            render:(time)=>(time.text),
            sorter:(a,b)=>(a.time.timestamp - b.time.timestamp)
          },
          {
            title: '操作',
            dataIndex: 'action',
            render:obj=>(<ul className={style.action_ul}>
              {
                obj.map((e,index)=>(<li className={e.preview?style.preview:''} key={index}>
                  {e.preview?<Dropdown trigger={['click']} overlay={menu_proview}><a>{e.name}<Icon type="down" /></a></Dropdown>:e.name=='修改'?<NavLink to={e.url}>{e.name}</NavLink>:<a href={e.url} id={e.id} pid={e.pid} className={style.action}>{e.name}</a>}
                  </li>))
              }
            </ul>)
          },
        ]
      break;
    }

    this.setState({
      data,
      columns,
    })
  }

  changetime=(ntime)=>{
    var time = new Date(ntime)
    return time.getFullYear()+'年'+time.getMonth()+'月'+time.getDate()+'日'+time.getHours()+'时'+time.getMinutes()+'分'+time.getSeconds()+'秒';
  }

  render() { 
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      selections: [
        {
          key: 'all-data',
          text: '全选',
          onSelect: () => {
            this.setState({
              selectedRowKeys: [...Array(this.state.datalimit).keys()], 
            });
          },
        },
        {
          key: 'odd',
          text: '选择偶数项',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
        {
          key: 'even',
          text: '选择奇数项',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
      ],
    };

    return (
      <div className={style.tmp}>
        <div className={style.tmp_header}>
          <div style={this.props.mod.seach?{display:'flex'}:{display:'none'}} className={style.seach}>
            <div style={this.props.mod.seach_saixuan?{display:'flex'}:{display:'none'}} className={style.seach_div}>
              <span>筛选：</span>
              <Select optionLabelProp='show' className={style.seach_select} placeholder='PC/手网'>
                <Option show='PC/手网' value="all">全部</Option>
                <Option show='企宣经典网站/电脑' value="pc">企宣经典网站/电脑</Option>
                <Option show='企宣经典网站/移动' value="phone">企宣经典网站/移动</Option>
              </Select>
            </div>
            <div style={this.props.mod.seach_hangye?{display:'flex'}:{display:'none'}} className={style.seach_div}>
              <span>行业筛选：</span>
              <Select optionLabelProp='show' className={style.seach_select} placeholder='全部'>
                <Option show='全部' value="all">全部</Option>
                <Option show='医院医疗' value="">医院医疗</Option>
                <Option show='教育培训' value="pc">教育培训</Option>
                <Option show='美食餐饮' value="phone">美食餐饮</Option>
              </Select>
            </div>
            <div style={this.props.mod.seach_sou?{display:'flex'}:{display:'none'}} className={style.seach_div}>
              <span>搜索：</span>
              <Input className={style.seach_select} placeholder='请输入名称搜索' />
            </div>
            <div style={this.props.mod.seach_time?{display:'flex'}:{display:'none'}} className={style.seach_div}>
              <span>时间搜索：</span>
              <RangePicker />
            </div>
            <Button style={this.props.mod.seach_button?{display:'block'}:{display:'none'}} className={style.seach_button} type="primary">搜索</Button>
          </div>
          <Button style={this.props.mod.seach_add?{display:'block'}:{display:'none'}} className={style.seach_add} type="primary">+ 添加</Button>
          <Button style={this.props.mod.seach_export?{display:'inline-block'}:{display:'none'}} className={style.seach_export} type="primary">导出</Button>
          <Select style={this.props.mod.seach_action?{display:'inline-block'}:{display:'none'}} optionLabelProp='show' className={style.seach_action} placeholder='操作'>
            <Option show='删除' value="delete">删除</Option>
            <Option show='已回复' value="replied">已回复</Option>
            <Option show='未回复' value="unanswered">未回复</Option>
          </Select>
        </div>
        <div className={style.msg}>
          <Icon style={{color:'#1890FF'}} type="exclamation-circle" theme="filled" />
          <span className={style.msg_title}>已选择<p>{this.state.selectedRowKeys.length}项</p></span>
          <div className={style.msg_delete}>删除</div>
          <div className={style.msg_alldata}>一共<p>{this.state.datalength}项</p></div>
        </div>
        <div className={style.tab}>
          <Table pagination={this.state.pagination} rowSelection={rowSelection} columns={this.state.columns} dataSource={this.state.data} />
        </div>
      </div>
    );
  }
}
 
export default Template;